<template>
    <div class="container">
        <!-- 头部 -->
        <van-nav-bar 
        title='周边配套' 
        left-text="返回" 
        left-arrow
        @click-left="onClickLeft"
        />
        <!-- 地图 -->
        <div class="content">
            <!-- map地图  &&&& 生活周边配套-->
            <baidu-map class="bm-view" 
                :center="{lng,lat}" 
                :zoom="16"
                :scroll-wheel-zoom="true" 
                :ak="YOUR_APP_KEY">
                <!-- 中心地标 -->
                <!-- 中心地标 -->
                <bm-marker
                        :icon="{url: '/static/address-logo2.png', size: {width: 22, height: 28}}"
                        :position="{lng, lat}">
                    <!-- <bm-info-window class="info-window"  :show="true" :closeOnClick="false" :width="0" :height="0">
                        <div class="address-name" @click="to_mapDetail"></div>
                    </bm-info-window> -->
                    <!-- :icon="{url:'/static/icon1.png' , size: {width: 45, height: 35}}" -->
                </bm-marker>
                <template v-for="(item,index) in markList">
                        <bm-marker 
                        :key="item.uid"
                        
                        :position="{lng:item.location.lng, lat: item.location.lat}"
                        @click="infoWindowSelect(item.name,item,index)">
                        <!-- <bm-info-window 
                            :show="item.flag" 
                            @close="infoWindowClose(item)" >
                            <div class="infowindow-box">
                                <div class="infowindow-name">{{selectName}}</div>
                                <div class="infowindow-from">距离{{item.detail_info.distance}}米</div>
                            </div>
                        </bm-info-window> -->
                         <bm-label :content="item.name" :labelStyle="{color: 'red', fontSize : '12px'}" :offset="{width: -35, height: 30}"/>
                    </bm-marker>
                </template>
            </baidu-map>
            <div class="nav-list">
                <div class="nav-item"
                :class="Arrindex==item.id?'on':''" 
                @click="changeItem(item.name,item.id,item.icon)" 
                v-for="item in navList" 
                :key="item.id">
                <div class="pic">
                    <img v-if="item.id==Arrindex" :src="item.onImg" alt="">
                    <img v-else :src="item.img" alt="">
                </div>
                <div class="text">{{item.name}}</div>
            </div>
            </div>
        </div>
    </div>
</template>
<script>
import {roomdetailNeigborhood} from "@/api/map"
import {BmMarker,BmInfoWindow,BmLabel} from 'vue-baidu-map';
import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
export default {
    components:{
        BmMarker,
        BaiduMap,
        BmInfoWindow,
        BmLabel,
    },
    data(){
        return{
            icon:'/static/icon1.png',
            // 经纬度
            lng:"",
            lat:"",
            // 周边配套数组
            markList:[],
            // 百度地图key
            YOUR_APP_KEY:'DHHgQLPu0a2e4rY7ORxUiPpChQ9RLsdy',
            navList:[
                {name:"公交",id:0,img:"/static/map1.png",onImg:'/static/onmap1.png',icon:"/static/icon1.png"},
                {name:"地铁",id:1,img:'/static/map2.png',onImg:'/static/onmap2.png',icon:"/static/icon2.png"},
                {name:"学校",id:2,img:'/static/map3.png',onImg:'/static/onmap3.png',icon:"/static/icon3.png"},
                {name:"医院",id:3,img:'/static/map4.png',onImg:'/static/onmap4.png',icon:"/static/icon4.png"},
                {name:"餐饮",id:4,img:'/static/map5.png',onImg:'/static/onmap5.png',icon:"/static/icon5.png"},
            ],
            // 周边配套 关键字（公交，小区，学校）
            NeigborhoodQuery:"公交",
            Arrindex:0,
            // 地标跟生活配套的名字
            selectName:"",
            // 周边配套名字（弹窗）
            mapcontShow:false,
            // 周边配套图标
            iconUrl:''
        }
    },
    created(){
        console.log(this.$route.query.lng,this.$route.query.lat)
        this.lng=this.$route.query.lng
        this.lat=this.$route.query.lat
        if(this.$route.query.lng){
            this.Neigborhoodmessage()
            this.iconUrl=`/static/icon1.png`
        }
    },
    methods:{
         // 返回上一页面
        onClickLeft(){
            this.$router.go(-1);
        },
        // 获取店铺 周边配套信息
        Neigborhoodmessage(){
            roomdetailNeigborhood({
                query:this.NeigborhoodQuery+',',
                region:"长沙",
                location:this.lat+','+this.lng,
                ak:"DHHgQLPu0a2e4rY7ORxUiPpChQ9RLsdy",
                output:"json",
                radius:"800",
                scope:"2"
            }).then(res=>{
                console.log(res)
                // 让每个地标都有个flag属性
                var flag=false
                // flag属性 1：为true出现弹窗 2：为false则不出现
                for(let i in res.results){
                    res.results[i].flag=flag
                }
                this.markList=res.results
                // this.selectName=res.results[0].name
            })
        },
        // 更换关键字
        changeItem(name,id,icon){
            this.Arrindex=id
            this.NeigborhoodQuery=name
            // this.icon=JSON.stringify(icon)
            this.Neigborhoodmessage()
            if(id==0){
                this.iconUrl=`/static/icon1.png`
            }else if(id==1){
                this.iconUrl=`/static/icon2.png`
            }else if (id==2){
                this.iconUrl=`/static/icon3.png`
            }else if(id==3){
                this.iconUrl=`/static/icon4.png`
            }else if(id==4){
                this.iconUrl=`/static/icon5.png`
            }
            // this.iconUrl=icon
            // console.log(this.iconUrl)
        },
        // 地标点击事件 
        infoWindowSelect (name,item,index) {
            this.mapcontShow = true
            console.log(name,item,index)
            // 1:设flag属性 （点击不同的地标，展示出相对应的信息弹窗）
            var markList=this.markList
            if(item.flag){
                item.flag=false
            }else{
                item.flag=true
            }
            // 2:让选中的地标，排序为第一位
            for(let i in markList){
                if(markList[i]==item){
                    console.log(123)
                    markList.splice(i, 1); // 如果数据组存在该元素，则把该元素删除
                    // console.log(markList)
                    markList.unshift(item); // 再添加到第一个位置
                    console.log(markList)
                }
            }
            this.selectName=name
        },
        // 弹窗关闭事件 让flag为false
        infoWindowClose (item) {
            // console.log(item)
            item.flag=false
        },
    }
}
</script>
<style lang="less" scoped>
/// 顶部样式
/deep/.van-nav-bar__text{
	color: #333;
}
/deep/.van-nav-bar{
	.van-icon{
		color: #333;
	}
}
.nav-img{
	img{
		width: 0.39rem;
		height: 0.39rem;
	}
}
.bm-view{
    width: 100%;
    height: calc(100vh - 46px);
}
/deep/.BMapLabel{
    // position: absolute;
    left: 60%!important;
    transform: translate(-35%,0);
        
}
// 地图
.content{
    position: relative;
    .nav-list{
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: rgba(0, 0, 0, 0.5);
    }
}
.nav-list{
    display: flex;
}
.nav-item{
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.28rem;
    color: #fff;
    flex-direction: column;
    padding: 0.1rem;
    img{
        width: 0.45rem;
        height: 0.45rem;
    }
}
.nav-item.on{
    color: #F08200;
}
// 弹窗信息
.infowindow-box{
    padding-top: 0.25rem;
    display: flex;
    justify-content: space-between;
    font-size: 0.24rem;
}
</style>